<template>
  <div class="app-container">
   <el-select v-model="filters.channelId" @change="doAction({type:'get',action:'getGrid'})">
      <el-option
        v-for="o in channelList"
        :label="o.channelName"
        :value="o.channelId"
        :key="o.channelId"
      ></el-option>
    </el-select>
    <el-table border :data="tableData" v-loading="loading" element-loading-text="加载中..."
              class="el-table-align-center">
      <el-table-column label="三方支付名称" prop="merchantName" align="center"></el-table-column>
      <el-table-column label="商户号" prop="merchantCode" align="center"></el-table-column>
      <el-table-column label="自动出款金额区间" prop="merchantName" align="center">
        <template slot-scope="{row}">
          {{row.minAmount}}  {{row.maxAmount}}
        </template>
      </el-table-column>
      <el-table-column label="当日出上限" prop="dailyLimit" align="center"></el-table-column>
      <el-table-column label="今日已出款总额" prop="successTotal" align="center"></el-table-column>
      <el-table-column label="轮替状态" prop="" align="center">
        <template slot-scope="{row}">
          {{row.dailyLimit > row.successTotal ? '使用中' :'已停用'}}
        </template>
      </el-table-column>
    </el-table>
    <custom-dialog :visible="dialogVisible" v-if="dialogVisible && dialogName === 'custom-dialog'"
                   returnButtonName="返回" :callback="closeDialog">
      <div slot="title">&nbsp;</div>
      <withdraw-payment-merchant :paymentId="currentPaymentId" :levelId="filters.levelId"/>
    </custom-dialog>
  </div>
</template>


<script>
   import {getPaymentManageChannelList} from "@/services/api/recharge";
  import {paymentWithdrawOverview} from "@/services/api/payment";
  import {grid, form, dialog} from '@/build'
  import WithdrawPaymentMerchant from '@/views/finance/paymentConfigOverview/withdrawPaymentMerchant'
  import CustomDialog from "@/components/customDialog/index";

  export default {
    name: "withdraw-payment",
    components: {
      CustomDialog,
      WithdrawPaymentMerchant},
    mixins: [grid, form, dialog],
    data() {
      return {
        levelList: [],
        tableData: [],
        currentPaymentId: 0,
        dialogVisible: false,
        paymentList: [],
        channelList:[],
        filters: {
          channelId: -1,
        }
      }
    },
    watch: {
      levelList(){
        this.filters.levelId = (this.levelList && this.levelList.length && this.levelList[0].levelId)
        this.gridSearch()
      }
    },
    methods: {
      changeHandler() {
        this.gridSearch()
      },
    },
    mounted() {
     this.bindGet(getPaymentManageChannelList, 'channelList',{
        format: data=>{
          data.unshift({channelId:-1,channelName:'全部'});
          return data
        }
      });
      this.bindGet(paymentWithdrawOverview, 'tableData',{
        action: 'getGrid',
        sendingData: 'filters',
      });
      this.getAll();
      // this.initSort(changeTableSortSetting, true, 'tableData', 'id')
    }
  }
</script>

<style lang="scss" scoped>
  .el-table-align-center {
    &.el-table {
      width: 100%;
      text-align: center !important;
      th {
        text-align: center !important;
      }
    }
  }

</style>
